<template>
  <div class="content_wrap flex">
    <div class="content_left">
      <div class="music_top flex">
        <div class="dj_img">
          <div class="mkb">
            <img :src="playlist.coverImgUrl" alt="" />
          </div>
        </div>
        <div class="dj_info clearfix">
          <div class="dj_info_title flex">
            <i class="dj_info_title_logo">
              <span></span>
            </i>
            <h2>{{ playlist.name }}</h2>
          </div>
          <!-- 用户信息 -->
          <div class="user_ifn flex">
            <div class="user_h_img">
              <a href="#">
                <img :src="playlist.creator.avatarUrl" alt="" />
              </a>
            </div>
            <a href="#" class="user_name"
              >{{ playlist.creator.nickname }}
              <img
                src="https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4874132307/4499/f228/d867/da64b9725e125943ad4e14e4c72d0884.png"
                alt=""
              />
            </a>
            <p class="created_time">{{ playlist.createTime | getTime }} 创建</p>
          </div>
          <div class="action_buttons flex">
            <a href="#" class="play_btn">
              <span class="btn2">
                <em class="play_img btn2"> </em>
                播放
              </span>
            </a>
            <a href="#" class="addto_btn btn2"></a>
            <a href="#" class="collection btn2">
              <span class="btn2"
                >({{ playlist.subscribedCount | format }})</span
              >
            </a>
            <a href="#" class="share btn2">
              <span class="btn2">({{ playlist.shareCount | format }})</span>
            </a>
            <a href="#" class="down_btn btn2">
              <span class="btn2">下载</span>
            </a>
            <a href="#" class="pl_btn btn2">
              <span class="btn2">({{ playlist.commentCount | format }})</span>
            </a>
          </div>
          <div class="tags flex">
            <span>标签：</span>
            <div class="tagsLi">
              <a
                href="#"
                class="btn2"
                v-for="item in playlist.tags"
                :key="item"
              >
                <span class="btn2">{{ item }}</span>
              </a>
            </div>
          </div>
          <div class="album_desc" :class="{ zhankai: zk }">
            <span>介绍：</span>
            <span v-for="text in description" :key="text"
              ><span>{{ text }}</span
              ><br
            /></span>
          </div>
          <div class="flex" style="justify-content: end">
            <a href="javascript:;" class="showMore" @click="zk = !zk"
              ><span class="spanMAL" v-show="zk"
                >展开<i class="jiantou jiantou_h"></i></span
              ><span class="spanMAL" v-show="!zk"
                >收起<i class="jiantou jiantou_s"></i></span
            ></a>
          </div>
        </div>
      </div>
      <div class="n-songtb">
        <div class="n-songtb_title flex">
          <div class="flex">
            <h3>歌曲列表</h3>
            <span class="songNum">{{ playlist.trackCount }}首歌</span>
          </div>
          <div class="flex">
            <div class="out_link">
              <i></i>
              <a href="#" class="out-link">生成外链播放器</a>
            </div>
            <div class="playNum">
              播放：<span>{{ playlist.playCount }}</span
              >次
            </div>
          </div>
        </div>
        <table class="songList_table">
          <thead>
            <tr>
              <th class="first_w1">
                <div class="wp">&nbsp;</div>
              </th>
              <th class="w2">
                <div class="wp af0"></div>
              </th>
              <th class="w3">
                <div class="wp af1"></div>
              </th>
              <th class="w4">
                <div class="wp af2"></div>
              </th>
              <th class="w5">
                <div class="wp af3"></div>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr
              :class="{ even: index % 2 == 0 }"
              v-for="(item, index) in playlist.tracks"
              :key="item.id"
            >
              <td class="left_num">
                <div class="left_hd flex">
                  <span class="nth_num">{{ index + 1 }}</span>
                  <span class="ply_img"></span>
                </div>
              </td>
              <td class="songName_wrap">
                <div class="songName_div">
                  <a href="javascript:;" class="f-thide" @click="$router.push(`/songDetail?id=${item.id}`)">{{ item.name }}</a>
                  <span class="mv" v-if="item.mv !== 0"></span>
                </div>
              </td>
              <td class="musicTime">
                <span class="shic">{{ item.dt | getDT }}</span>
                <div class="hic hshow">
                  <a href="" class="icn-add"></a>
                  <a href="" class="icn icn-fav"></a>
                  <a href="" class="icn icn-share"></a>
                  <a href="" class="icn icn-dl"></a>
                </div>
              </td>
              <td class="songSinger-wrap">
                <div class="songSinger">
                  <a href="#" class="f-thide"
                    ><span v-for="ar in item.ar" :key="ar.id"
                      >{{ ar.name
                      }}<span v-if="item.ar[item.ar.length - 1].id !== ar.id"
                        >/</span
                      ></span
                    ></a
                  >
                </div>
              </td>
              <td class="zj_wrap">
                <div class="zj">
                  <a href="#" class="f-thide">{{ item.al.name }}</a>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="nowDown">
          <p>查看更多内容，请下载客户端</p>
          <a href="#">立即下载</a>
        </div>
        <div class="comments_wrap">
          <div class="comments">
            <div class="c_title flex">
              <h3>评论</h3>
              <span class="songNum">共{{ playlist.commentCount }}条评论</span>
            </div>
            <div class="comments_contents">
              <div class="user_comments flex">
                <div class="headI">
                  <img
                    src="https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
                    alt=""
                  />
                </div>
                <div class="comment_area">
                  <textarea
                    name=""
                    id="status"
                    placeholder="评论"
                    v-model="text"
                    @click="fn"
                  ></textarea>
                  <div class="corr u-arr">
                    <em class="arrline">◆</em><span class="arrclr">◆</span>
                  </div>
                  <div class="user_comments_bottom flex">
                    <span id="counter" :textNum="textNum">{{ textNum }}</span>
                    <a href="javascript:;" @click="comClick">评论</a>
                  </div>
                </div>
              </div>
            </div>
            <!-- 精彩评论 -->
             <Comment title="精彩评论" :data="hotComments"></Comment>
            <!-- 最新评论 -->
             <Comment title="最新评论" :data="comments" :commentCount='playlist.commentCount'></Comment>
          </div>
        </div>
      </div>
      
    </div>
    <div class="content_right">
      <div class="content_box">
        <div class="likeSongPerson">
          <h3>喜欢这个歌单的人</h3>
          <ul class="m-piclist clearfix">
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
            <li>
              <a href="#">
                <img
                  src="http://p1.music.126.net/gmy5cJrXfm4Nw2Ro6znE7A==/109951165060635960.jpg?param=40y40"
                  alt=""
                />
              </a>
            </li>
          </ul>
        </div>
        <div class="hitSong">
          <h3>热门歌单</h3>
          <ul class="m-rctlist clearfix">
            <li class="flex">
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
            <li class="flex">
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
            <li class="flex">
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
            <li class="flex">
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
            <li class="flex">
              <div class="cver u-cover u-cover-3">
                <a
                  href="/playlist?id=6827562995"
                  title="韩综 | 换乘恋爱 BGM"
                  data-res-id="6827562995"
                  data-res-type="13"
                  data-res-action="log"
                  data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                  ><img
                    src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50"
                  />
                </a>
              </div>
              <div class="info">
                <p class="f-thide">
                  <a
                    class="sname f-fs1 s-fc0"
                    href="/playlist?id=6827562995"
                    title="韩综 | 换乘恋爱 BGM"
                    data-res-id="6827562995"
                    data-res-type="13"
                    data-res-action="log"
                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"
                    >韩综 | 换乘恋爱 BGM</a
                  >
                </p>
                <p>
                  <span class="by s-fc4">by</span
                  ><a
                    class="nm nm f-thide s-fc3"
                    href="/user/home?id=111050645"
                    title="咕噜咕噜v-"
                    >咕噜咕噜v-</a
                  >
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="m-multi">
          <h3 class="u-hd3">
            <span class="f-fl">网易云音乐多端下载</span>
          </h3>
          <ul class="bg flex">
            <li>
              <a
                data-res-action="bilog"
                data-log-action="downloadapp"
                data-log-json='{"type":"iPhone","source":"detail"}'
                href="https://itunes.apple.com/cn/app/id590338362"
                class="ios"
                hidefocus="true"
                target="_blank"
                >iPhone</a
              >
            </li>
            <li>
              <a
                data-res-action="bilog"
                data-log-action="downloadapp"
                data-log-json='{"type":"pc","source":"detail"}'
                href="https://music.163.com/api/pc/download/latest"
                class="pc"
                hidefocus="true"
                target="_blank"
                >PC</a
              >
            </li>
            <li>
              <a
                data-res-action="bilog"
                data-log-action="downloadapp"
                data-log-json='{"type":"android","source":"detail"}'
                href="https://music.163.com/api/android/download/latest2"
                class="aos"
                hidefocus="true"
                target="_blank"
                >Android</a
              >
            </li>
          </ul>
          <p class="s-fc4">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getPlayListDetailApi,
  getPlayListDetailCommentApi,
} from "@/http/api.js";
import vip1 from "../../assets/images/vip1.png";
import vip2 from "../../assets/images/vip2.png";
import vip3 from "../../assets/images/vip3.png";
import vip4 from "../../assets/images/vip4.png";
import vip5 from "../../assets/images/vip5.png";
import vip6 from "../../assets/images/vip6.png";
import { mapMutations } from "vuex";
import Comment from "@/components/common/Comment.vue";
export default {
  data() {
    return {
      playlist: {
        creator: {},
      },
      description: "",
      text: "",
      comments: [],
      hotComments: [],
      vipImg: [vip1, vip2, vip3, vip4, vip5, vip6],
      zk: true,
    };
  },
  components:{Comment},
  computed: {
    textNum() {
      if (140 - this.text.length <= 0) {
        this.$message({
          showClose: true,
          message: "只能输入140个字",
          type: "warning",
        });
        return 0;
      } else {
        return 140 - this.text.length;
      }
    },
  },
  methods: {
    async getPlayListDetail() {
      const res = await getPlayListDetailApi(this.$route.query.id);
      this.playlist = res.playlist;
      this.playlist.creator = res.playlist.creator;
      this.description = res.playlist.description.split("\n");
    },
    comClick() {
      if (this.text.trim() == "") {
        this.$message({
          showClose: true,
          message: "不能输入空",
          type: "error",
        });
        return;
      }
      if (140 - this.text.length < 0) {
        this.$message({
          showClose: true,
          message: "只能输入140个字",
          type: "error",
        });
        return;
      } else {
        this.$message({
          showClose: true,
          message: "评论成功",
          type: "success",
        });
      }
    },
    // 评论
    async getPlayListDetailComment() {
      const res = await getPlayListDetailCommentApi(this.$route.query.id);
      console.log(res);
      this.comments = res.comments;
      this.hotComments = res.hotComments;
    },
    // 判断评论是否登录
    fn() {
      const token = localStorage.getItem("token");
      if (!token) {
        this.udateLoginShow(true);
        this.$message({
          showClose: true,
          message: "请先登录",
          type: "warning",
        });
        return;
      }
    },
    ...mapMutations({
      udateLoginShow: "login/udateLoginShow",
    }),
  },
  filters: {
    // 歌单创建时间
    getTime(createTime) {
      let date = new Date(createTime);
      // 获取年份
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      function format(val) {
        return val < 10 ? "0" + val : val;
      }
      month = format(month);
      day = format(day);
      return year + "-" + month + "-" + day;
    },
    // 歌曲时长
    getDT(dt) {
      let date = new Date(dt);
      function format(val) {
        return val < 10 ? "0" + val : val;
      }
      let m = date.getMinutes();
      let s = date.getSeconds();
      m = format(m);
      s = format(s);
      return m + ":" + s;
    },
    // 评论日期
    getComDate(time) {
      // 如果是当前年就不显示年份
      let st = new Date(time);
      let newTimeObj = new Date();
      let newTime = newTimeObj.getFullYear();
      let year = st.getFullYear();
      let month = st.getMonth() + 1;
      let day = st.getDate();
      let m = st.getMinutes();
      let h = st.getHours();
      function format(val) {
        return val < 10 ? "0" + val : val;
      }
      month = format(month);
      day = format(day);
      m = format(m);
      h = format(h);
      if (year == newTime) {
        return `${month}月${day}日 ${h}:${m}`;
      } else {
        return `${year}年${month}月${day}日`;
      }
      // 如果不是当前年就显示年份
    },
  },
  created() {
    this.getPlayListDetail();
    this.getPlayListDetailComment();
  },
};
</script>
 
<style lang="less" scoped>
.content_wrap {
  display: flex;
  width: 980px;
  margin: 0 auto;
  background: url(../../assets/images/wrap1.png) repeat-y;
  border: 1px solid #d3d3d3;
  border-bottom: 0;
  border-top: 0;
}

.content_left {
  width: 729px;
  padding: 47px 30px 40px 39px;
  height: inherit;
}

.content_right {
  height: inherit;
  width: 255px;
}

.mkb {
  position: relative;
  width: 208px;
  height: 208px;

  border: 1px solid #000;
  box-sizing: content-box;
}

.dj_img img {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 200px;
  height: 200px;
}

.dj_info {
  width: 426px;
}

.dj_info_title {
  margin: 0 0 12px;
}

.dj_info_title_logo {
  position: relative;
  background: url(../../assets/images/icon.png) no-repeat;
  display: inline-block;
  width: 65px;
  height: 24px;
  background-position: 0 -243px;
  overflow: hidden;
}

.dj_info_title_logo > span {
  background: url(../../assets/images/white-r-icon@3x.png);
  position: absolute;
  display: inline-block;
  width: 8px;
  height: 8px;
  top: 2px;
  background-size: cover;
  left: 34px;
}

.dj_info_title h2 {
  margin: 0;
  font-size: 20px;
  margin-left: 20px;
  font-weight: 400;
  line-height: 24px;
}

.user_ifn {
  margin: 0 0 20px;
  line-height: 35px;
}

.user_h_img {
  margin-right: 10px;
}

.user_h_img img {
  width: 35px;
  height: 35px;
}

.user_name {
  line-height: 35px;
  color: #0c73c2;
  font-size: 12px;
}

.user_name:hover {
  color: #0c73c2;
  text-decoration: underline;
}

.user_name img {
  width: 13px;
  height: 13px;
}

.created_time {
  display: inline-block;
  padding: 0;
  line-height: 35px;
  font-size: 12px;
  color: #999;
  margin-left: 15px;
  margin-bottom: 0;
}

.action_buttons a {
  display: inline-block;

  line-height: 31px;
  font-size: 12px;
  color: #000;
}

.action_buttons .play_btn {
  width: 66px;
  height: 31px;
  text-align: center;
}

.btn2 {
  background: url(../../assets/images/button2.png) no-repeat;
  font-family: simsun, \5b8b\4f53;
}

.action_buttons .play_btn span {
  display: block;
  color: #fff;
  background-position: 0 -387px;
  padding: 0 7px 0 8px;
}

.action_buttons .play_btn:hover span {
  background-position: 0 -469px;
}

.play_img {
  float: left;
  width: 20px;
  height: 18px;
  margin: 6px 2px 2px 0;
  background-position: 0 -1622px;
  overflow: hidden;
}

.action_buttons .play_btn:hover .play_img {
  background-position: -28px -1622px;
}

.addto_btn {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  cursor: pointer;
  padding: 0 5px 0 0;
  white-space: nowrap;
  width: 31px;
  margin-left: -3px;
  padding-right: 0;
  background-position: 0 -1588px;
  margin-right: 5px;
}

.addto_btn:hover {
  background-position: -40px -1588px;
}

.collection {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.collection span {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  background-position: 0 -977px;
}

.collection:hover {
  background-position: right -1106px;
}

.collection:hover span {
  background-position: 0 -1063px;
}

.share {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.share span {
  display: inline-block;
  background-position: 0 -1225px;
  padding: 0px 0px 0 28px;
}

.share:hover {
  background-position: right -1106px;
}

.share:hover span {
  background-position: 0 -1268px;
}

.down_btn {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.down_btn span {
  display: inline-block;
  background-position: 0 -2761px;
  padding-right: 2px;
  padding-left: 28px;
  padding: 0 7px 0 36px;
}

.down_btn:hover {
  background-position: right -1106px;
}

.down_btn:hover span {
  background-position: 0 -2805px;
}

.pl_btn {
  height: 31px;
  line-height: 30px;
  min-width: 23px;
  padding: 0 5px 0 0;
  background-position: right -1020px;
  margin-right: 6px;
}

.pl_btn span {
  display: inline-block;
  padding-right: 2px;
  padding-left: 28px;
  background-position: 0 -1465px;
}

.pl_btn:hover {
  background-position: right -1106px;
}

.pl_btn:hover span {
  background-position: 0 -1508px;
}

.tags {
  margin: 25px 0 5px;
  line-height: 22px;
}

.tags > span {
  font-size: 12px;
  color: #666;
  width: 40px;
}

.tagsLi {
  display: flex;
  flex-wrap: wrap;
}

.tagsLi > a {
  margin: 0px 10px 3px 0;
  color: #777;
  text-decoration: none;
  font-size: 12px;
  padding: 0 10px 0 0;
  text-shadow: 0 1px #fdfdfd;
  background-position: right -27px;
  display: inline-block;
}

.tagsLi > a span {
  display: inline-block;

  height: 22px;
  line-height: 22px;
  position: relative;
  zoom: 1;
  padding: 0 3px 0 13px;
  background-position: 0 0;
}

.album_desc {
  font-size: 12px;
  overflow: hidden;
  &.zhankai {
    height: 88px;
  }
}

.n-songtb {
  margin-top: 27px;
}

.n-songtb_title {
  justify-content: space-between;
  height: 33px;
  border-bottom: 2px solid #c20c0c;
}

.n-songtb_title h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
  line-height: 28px;
}

.n-songtb_title .songNum {
  margin: 9px 0 0 20px;
}

.playNum {
  margin-top: 5px;
  font-size: 12px;
}

.playNum span {
  color: #c20c0c;
  font-weight: 700;
}

.out_link {
  margin-right: 20px;
  margin-top: 5px;
}

.out-link {
  font-size: 12px;
  color: #4996d1;
  text-decoration: underline;
  vertical-align: top;
}

.out_link i {
  display: inline-block;
  background: url(../../assets/images/icon.png) no-repeat;
  width: 16px;
  height: 16px;
  background-position: -34px -863px;
}

.songList_table {
  width: 100%;
  border: 1px solid #d9d9d9;
  font-size: 12px;
}

.songList_table th {
  background: url(../../assets/images/table.png) no-repeat;
  vertical-align: top;
  text-align: left;
  font-weight: normal;
  color: #666;
  height: 38px;
  background-color: #f7f7f7;
  background-position: 0 0;
  background-repeat: repeat-x;
}

.songList_table .wp {
  background: url(../../assets/images/table.png) no-repeat;
  padding: 8px 10px;
  background-position: 0 -56px;
}

.first_w1 {
  width: 74px;
}

.songList_table .af0:after {
  content: "\6b4c \66f2 \6807 \9898";
}

.af1:after {
  content: "\65f6 \957f";
}

.af2:after {
  content: "\6b4c \624b";
}

.af3:after {
  content: "\4e13 \8f91";
}

.even {
  background-color: #f7f7f7;
}

.songList_table td {
  /* background: url(../../assets/images/table.png) no-repeat; */
  padding: 6px 10px;
  line-height: 18px;
  text-align: left;
}

.songList_table .left_hd {
  align-items: center;
  height: 18px;
}

.songList_table .left_hd .nth_num {
  width: 25px;
  margin-left: 5px;
  color: #999;
}

.songList_table .left_hd .ply_img {
  display: inline-block;
  background: url(../../assets/images/table.png);
  width: 17px;
  height: 17px;
  cursor: pointer;
  background-position: 0 -103px;
}

.songName_wrap {
  width: 235.75px;
  padding: 6px 10px;
  text-align: left;
  line-height: 18px;
}

.songList_table a {
  color: #333;
}

.songName_div {
  width: 100%;
  height: 20px;
}

.songName_div a {
  display: inline-block;
  max-width: 190px;
}

.songName_div span {
  background: url(../../assets/images/table.png) no-repeat;
  position: absolute;
  width: 23px;
  height: 17px;
  margin: 1px 0 0 4px;
  background-position: 0 -151px;
  overflow: hidden;
  cursor: pointer;
}

.musicTime {
  width: 111px;
  position: relative;
}

.musicTime .hic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 6px 10px;
}

.hic a {
  width: 18px;
  height: 16px;
  margin-top: 2px;
  background: url(../../assets/images/table.png) no-repeat;
}

.hic .icn {
  margin: 2px 0 0 4px;
  overflow: hidden;
  display: inline-block;
}

.hic .icn-add {
  background: url(../../assets/images/icon.png) no-repeat;
  display: inline-block;
  width: 13px;
  height: 13px;
  background-position: 0 -700px;
}

.hic .icn-fav {
  background-position: 0 -174px;
  /* background-position: -20px -174px; */
}

.hic .icn-share {
  background-position: 0 -195px;
}

.hic .icn-dl {
  background-position: -81px -174px;
}

.hshow {
  display: none;
}

tbody tr:hover .shic {
  display: none;
}

tbody tr:hover .hshow {
  display: block;
}

.songSinger-wrap {
  width: 89.45px;
  padding: 6px 10px;
  line-height: 18px;
  text-align: left;
}

.songSinger {
  width: 100%;
  height: 20px;
}

.songSinger a {
  display: inline-block;
  width: 65px;
}

.zj_wrap {
  width: 127.8px;
}

.zj {
  width: 100%;
  height: 20px;
}

.zj a {
  display: inline-block;
  width: 106px;
}

.nowDown {
  width: 100%;
  height: 66px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  margin-top: 30px;
  margin-bottom: -10px;
  text-align: center;
}

.nowDown p {
  font-size: 13px;
  color: #333333;
}

.nowDown a {
  width: 120px;
  height: 30px;
  background-image: linear-gradient(90deg, #ff5a4c 0%, #ff1d12 100%);
  border-radius: 18px;
  line-height: 30px;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}

.nowDown a:hover {
  text-decoration: none;
}

.comments_wrap {
  margin-top: 40px;
}

.c_title {
  height: 33px;
  border-bottom: 2px solid #c20c0c;
}

.c_title h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
  line-height: 28px;
}

.c_title .songNum {
  margin: 9px 0 0 20px;
}

.comments_contents {
  margin-top: 20px;
}

.user_comments {
  margin-bottom: 20px;
}

.headI img {
  width: 50px;
  height: 50px;
}

.comment_area {
  /*  */
  position: relative;
  margin-left: 12px;
  height: 98px;
  font-size: 12px;
}

.comment_area textarea {
  resize: none;
  width: 578px;
  margin: 0;
  height: 63px;
  display: block;
  margin-right: -20px;
  padding: 5px 6px 6px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  line-height: 19px;
  overflow: auto;
  outline: none;
}

.u-arr {
  width: 13px;
  height: 14px;
  overflow: hidden;
}

.comment_area .corr {
  position: absolute;
  top: 11px;
  left: -7px;
}

.u-arr .arrline,
.u-arr .arrclr,
.u-arr .arriner {
  display: block;
  font-family: "SimSun";
  font-size: 15px;
  font-style: normal;
  font-weight: normal;
  height: 10px;
  line-height: normal;
}

.u-arr .arrline {
  color: #cdcdcd;
}

.u-arr .arrclr {
  margin: -10px 0 0 1px;
  color: #fff;
}

.user_comments_bottom {
  justify-content: end;
  position: relative;
  zoom: 1;
  clear: both;
  padding-top: 10px;
}

.user_comments_bottom span {
  color: #999;
  margin-right: 10px;
  line-height: 25px;
}

.user_comments_bottom a {
  display: inline-block;
  background: url(../../assets/images/button.png) no-repeat;
  width: 46px;
  height: 25px;
  background-position: -84px -64px;
  color: #fff;
  text-align: center;
  line-height: 25px;
}

.user_comments_bottom a:hover {
  text-decoration: none;
}

.content_box {
  padding: 20px 40px 40px 30px;
}

.content_box .likeSongPerson h3,
.content_box .hitSong h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
}

ul.m-piclist {
  margin: 0;
  margin-left: -13px;
  padding-bottom: 25px;
  box-sizing: border-box;
  width: 212px;
}

.m-piclist li {
  display: inline;
  width: 40px;
  height: 40px;
  padding: 0 0 13px 13px;
  box-sizing: content-box;
}

.m-piclist li img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}

.m-rctlist {
  margin-bottom: 25px;
}

.m-rctlist li {
  width: 200px;
  height: 50px;
  margin-bottom: 15px;
  line-height: 24px;
  font-size: 12px;
}

.u-cover {
  position: relative;
  display: block;
}

.m-rctlist .cver,
.n-rctlist .cver img {
  width: 50px;
  height: 50px;
}

.m-rctlist .cver {
  margin-right: -60px;
}

.m-rctlist .info {
  margin-left: 70px;
  line-height: 24px;
}

.m-rctlist .info p {
  margin: 0;
  width: 140px;
}

.m-rctlist .by {
  color: #999;
}

.m-rctlist .nm {
  max-width: 106px;
  margin: 0 2px 0 4px;
  color: #666;
}

.sname {
  color: #000;
  font-size: 14px;
}

.m-multi {
  margin: 20px 0;
  padding-bottom: 20px;
}

.u-hd3 {
  margin: 0;
  position: relative;
  height: 23px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-size: 12px;
  font-weight: 700;
}

.m-multi .bg {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  height: 65px;
  margin-bottom: 10px;
  background-position: 0 -392px;
  width: 200px;
}

.m-multi .bg a {
  display: block;
  width: 42px;
  height: 48px;
  text-indent: -9999px;
}

.m-multi .bg .pc {
  width: 60px;
  margin: 0 26px 0 30px;
}

.m-multi .bg .ios:hover {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  background-position: 0 -472px;
}

.m-multi .bg .pc:hover {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  background-position: -72px -472px;
}

.m-multi .bg .aos:hover {
  background: url(../../assets/images/sprite.png) no-repeat 0 9999px;
  background-position: -158px -472px;
}


.paging-wrap {
  font-size: 12px;
}

.jiantou {
  display: inline-block;
  background: url("../../assets/images/icon.png") no-repeat;
  width: 11px;
  height: 8px;
}

.jiantou_h {
  background-position: -65px -520px;
}

.jiantou_s {
  background-position: -45px -520px;
}

.showMore {
  font-size: 12px;
  color: #0c73c2;
}

.music_top {
  justify-content: space-between;
}
</style>